<template>
  <div class="login-container">
    <el-row>
      <el-col :span="24" :xs="24" :sm="24" :md="11" :lg="14" :xl="14">
        <div style="color: transparent">占位符</div>
      </el-col>
      <el-col :span="24" :xs="24" :sm="24" :md="12" :lg="9" :xl="9">
        <el-form
          ref="formDom"
          :model="form"
          :rules="rules"
          class="login-form"
          label-position="left"
        >
          <div class="title">hello !</div>
          <div class="title-tips">欢迎来到{{ title }}！</div>
          <el-form-item class="first-from-item" prop="username">
            <span class="svg-container svg-container-admin">
              <!-- <vab-icon :icon="['fas', 'user']" /> -->
              <el-icon><User /></el-icon>
            </span>
            <el-input
              v-model.trim="form.username"
              v-focus
              placeholder="请输入用户名"
              tabindex="1"
              type="text"
            />
          </el-form-item>
          <el-form-item prop="password">
            <span class="svg-container">
              <!-- <vab-icon :icon="['fas', 'lock']" /> -->
              <el-icon><Lock /></el-icon>
            </span>
            <el-input
              :key="passwordType"
              ref="password"
              v-model.trim="form.password"
              :type="passwordType"
              tabindex="2"
              placeholder="请输入密码"
              @keyup.enter="handleLogin"
            />
            <span
              v-if="passwordType === 'password'"
              class="show-password"
              @click="handlePassword"
            >
              <!-- <vab-icon :icon="['fas', 'eye-slash']"></vab-icon> -->
              <el-icon><Hide /></el-icon>
            </span>
            <span v-else class="show-password" @click="handlePassword">
              <!-- <vab-icon :icon="['fas', 'eye']"></vab-icon> -->
              <el-icon><View /></el-icon>
            </span>
          </el-form-item>
          <el-form-item>
            <el-button
              :loading="loading"
              class="login-btn"
              type="primary"
              @click="handleLogin"
            >
              登录
            </el-button>
          </el-form-item>
          <!-- <router-link to="/register">
            <div style="margin-top: 20px">注册</div>
          </router-link> -->
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {
  reactive,
  computed,
  ref,
  watch,
  getCurrentInstance,
  onUnmounted,
  onMounted
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { isPassword } from '@/utils/validate'
import {
  ElRow,
  ElCol,
  ElForm,
  ElFormItem,
  ElButton,
  ElIcon
} from 'element-plus'

const { proxy } = getCurrentInstance()
const loading = ref(false)
const passwordType = ref('password')
const redirect = ref(undefined)
const route = useRoute()
const router = useRouter()
const formDom = ref(null)

let title = computed(() => proxy.$baseTitle)
let form = reactive({
  username: '',
  password: ''
})

const vFocus = {
  focus: {
    inserted(el) {
      el.querySelector('input').focus()
    }
  }
}
const validateusername = (rule, value, callback) => {
  if ('' === value) {
    callback(new Error('用户名不能为空'))
  } else {
    callback()
  }
}
const validatePassword = (rule, value, callback) => {
  if (!isPassword(value)) {
    callback(new Error('密码不能少于6位'))
  } else {
    callback()
  }
}

let rules = reactive({
  username: [
    {
      required: true,
      trigger: 'blur',
      validator: validateusername
    }
  ],
  password: [
    {
      required: true,
      trigger: 'blur',
      validator: validatePassword
    }
  ]
})
// 当参数更改时获取url传值
watch(
  () => route.query.redirect,
  (newRedirect) => {
    redirect.value = newRedirect || '/'
  }
)

document.body.style.overflow = 'hidden'
onUnmounted(() => {
  document.body.style.overflow = 'auto'
})

const handleLogin = () => {
  formDom.value.validate((valid) => {
    if (valid) {
      loading.value = true
      // this.$store
      //   .dispatch('user/login', form)
      //   .then(() => {
      //     const routerPath =
      //       redirect.value === '/404' || redirect.value === '/401'
      //         ? '/'
      //         : redirect.value
      //     router.push(routerPath).catch(() => {})
      //     loading.value = false
      //   })
      //   .catch(() => {
      //     loading.value = false
      //   })
      setTimeout(() => {
        router.push(redirect.value).catch(() => {})
        loading.value = false
      }, 5000)
    } else {
      return false
    }
  })
}

onMounted(() => {
  form.username = 'admin'
  form.password = '123456'
  // setTimeout(() => {
  //   handleLogin()
  // }, 3000)
})
</script>

<style lang="less" scoped src="./index.less"></style>
